<template>
  <div>
    <common-header></common-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-service :list="serviceList"></home-service>
    <home-case :list="caseList"></home-case>
    <common-footer></common-footer>
    <common-buoy></common-buoy>
  </div>
</template>

<script>
import CommonHeader from 'common/CommonHeader'
import HomeSwiper from './components/Swiper'
import HomeService from './components/Service'
import HomeCase from './components/Case'
import CommonFooter from 'common/CommonFooter'
import CommonBuoy from 'common/CommonBuoy'
import axios from 'axios'
export default {
  name: 'Home',
  data () {
    return {
      swiperList: [],
      serviceList: [],
      caseList: []
    }
  },
  methods: {
    /**
     * 通过axios插件进行ajax请求
     */
    getHomeInfo () {
      axios.get('/api/home.json').then(this.getHomeInfoSucc)
    },
    /**
     * 对ajax成功请求后进行处理
     * @param res 返回的数据
     */
    getHomeInfoSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.swiperList = data.swiperList
        this.serviceList = data.serviceList
        this.caseList = data.caseList
      }
    }
  },
  components: {
    CommonHeader,
    HomeSwiper,
    HomeService,
    HomeCase,
    CommonFooter,
    CommonBuoy
  },
  mounted () {
    /**
     * 页面挂载时执行ajax的请求
     */
    this.getHomeInfo()
  }
}
</script>

<style lang="stylus" scoped>
</style>
